<template>
    <div class="personalDetails">
        <div class="goback" @click="goBack()">
            <img src="../../static/img/left_white.png" alt="">
        </div>
        <div class="banner">
            <img src="../../static/img/banner.png" class="banner_img" alt="">
            <p class="header_img">
                <img :src="headerImg" alt="">
            </p>
        </div>
        <div class="echarts_box">
            <div class="echarts_box_top">
                <div class="echarts_swtich_box">
                    <p class="echarts_text">
                        <span v-html="echartsSwtich?'月':''" @click="selectMounth"></span>
                        <span v-html="!echartsSwtich?'周':''" @click="selectWeek"></span>
                    </p>
                    <div class="echarts_swtich">
                        <p :class="{pright:echartsSwtich}"></p>
                    </div>
                </div>
                <p class="echarts_title">票数:{{likeNum}}</p>
            </div>
            <div id="echartsBox"></div>
        </div>
        <div class="my_like_box"  v-if="fromSwitch">
            <div class="my_like">
                <p class="my_like_title">
                    <span>关注的人</span>
                </p>
            </div>
            <ul class="before_three_box" v-if="fromSwitch">
                <li v-for="(item,index) in myLikeList" :key="index" @click="toPersonalDetails(item.nickName)">
                    <div class="my_info">
                        <div class="my_info_con">
                            <div class="my_info_l">
                                <p class="img_url">
                                    <img :src="item.imgHead" alt="">
                                </p>
                                <p class="my_info_l_r">
                                    <span class="my_info_l_r_t">{{item.nickName}}</span>
                                </p>
                            </div>
                            <div class="my_info_r">
                                <p class="link_num" :class="{yellow:item.thumbsUp>=900}">{{item.thumbsUp}}</p>
                                <img src="../../static/img/left-1.png" alt="" class="addLike_r">
                            </div>
                        </div>
                    </div>
                </li>
                <li class="addLike"  @click="addLike()" v-if="fromSwitch">
                    <div class="addLike_left">
                        <div class="addLike_left_box">
                            <div class="addLike_icon">
                                <p></p>
                                <p></p>
                            </div>
                        </div>

                        <p class="addLike_text">添加</p>
                    </div>
                    <img src="../../static/img/left-1.png" alt="" class="addLike_r">
                </li>
            </ul>
        </div>
        <div class="my_like_box my_like_box_one"  v-if="!fromSwitch">
            <p class="add_one_like" @click="addLikeTo()" v-if="!likeStatus">添加关注</p>
            <p class="add_one_like remove_one_like" v-else @click="removeLikeTo()">取消关注</p>
        </div>
    </div>
</template>
<script>
export default {
  name: "personalDetails",
  data() {
    return {
      fromSwitch:false,/*判断是自己的个人中心还是别人的个人中心*/
      likeNum: 799 /*票数 */,
      headerImg: "" /*头像*/,
      echartsSwtich: false,
      likeStatus:false,/* 别人个人中心是否被自己关注状态*/
      dataMounth: [0, 55, 201, 350, 402, 610, 680, 750, 805, 900, 920, 990],
      dataWeek: [0, 55, 201, 350, 402, 610, 680],
      XDataMounth: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月"
      ],
      XDataWeek: [6, 7, 8, 9, 10, 11, 12],
      myLikeList: [
        /*我关注的人数组 */
        {
          imgHead: "",
          nickName: "美酒1",
          thumbsUp: 1024,
          thumbsUpStatus: false
        },
        {
          imgHead: "",
          nickName: "美酒2",
          thumbsUp: 985,
          thumbsUpStatus: true
        },
        {
          imgHead: "",
          nickName: "美酒3",
          thumbsUp: 600,
          thumbsUpStatus: false
        }
      ]
    };
  },
  created(){
      
      this.getWhereFrom();
  },
  mounted() {
    this.drawEcharts(this.dataMounth, this.XDataMounth);
  },
  methods: {
      /*判断是自己的个人中心还是别人的个人中心*/
      getWhereFrom(){
          if(this.$route.query.myPersonalId){
              this.fromSwitch=true;
          }else{
              this.fromSwitch=false;
          }
      },
      goBack(){
          this.$router.push('/home')
      },
      /*echarts */
    drawEcharts(DataVal, DataDate) {
      let echartsBox = this.$echarts.init(
        document.getElementById("echartsBox")
      );
      this.likeNum = DataVal[DataVal.length - 1];
      let Options = {
        backgroundColor: new this.$echarts.graphic.RadialGradient(
          0,
          0,
          2,
          [
            {
              offset: 0,
              color: "#4addd5" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#4497f2" // 100% 处的颜色
            }
          ],
          false
        ),
        title: {
          text: "",
          textStyle: {
            fontWeight: "normal",
            fontSize: 12,
            color: "#F1F1F3"
          },
          left: "6%"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#57617B"
            }
          }
        },
        /*控制画布内容上下左右边距 */
        grid: {
          left: "5%",
          right: "2%",
          bottom: "8%",
          top: "20%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: "#ffffff"
              },
              show: false
            },
            data: DataDate,
            axisLabel: {
              interval: 0,
              rotate: 0,
              textStyle: {
                fontSize: 12
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: "value",

            interval: 300,
            max: 1200,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color:"rgba(255,255,255,0.4)" //"#86d2f2"
              }
            }
          }
        ],
        series: [
          {
            name: "票数",
            type: "line",
            smooth: true,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(255,255,255,0.7)" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255,255,255,0)" // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                },
                shadowColor: "rgba(228, 139, 76, 0.1)",
                shadowBlur: 10
              }
            },
            symbolSize: 4,
            itemStyle: {
              normal: {
                color: "#b8e4fc"
                // borderColor: "#e48b4c"
              }
            },
            data: DataVal
          }
        ]
      };
      echartsBox.setOption(Options);
    },
    /*选择月数据 */
    selectMounth() {
      this.echartsSwtich = false;
      this.drawEcharts(this.dataMounth, this.XDataMounth);
    },
    /*选择日数据 */
    selectWeek() {
      this.echartsSwtich = true;
      this.drawEcharts(this.dataWeek, this.XDataWeek);
    },
    /*关注的人页面 */
    toPersonalDetails(personalId) {
      this.$router.push({ path: "/personalDetails", query: { personalId } });
    },
    /*自己个人中心添加关注的人 */
    addLike() {
        this.$router.push({path:'/selectPeople',query:{select:'select'}})
    },
    /*别人个人中心添加关注*/
    addLikeTo(){
        this.likeStatus=true;
        // this.$router.push('/home')
    },
    /*别人个人中心取消关注*/
    removeLikeTo(){
        this.likeStatus=false;
    }
  }
};
</script>
<style lang="less" scoped>
@import url(../assets/less/public.less);
.personalDetails {
    position: relative;
  @font14();
  .goback{
      position: absolute;
      left: 30px;
      top: 30px;
      z-index: 9;
      width: 50px;
      height: 50px;
      border-radius: 50px;
      background:  rgba(204,204,204,0.3);

      img{
          width: 20px;
          margin-top: 8px;
          margin-left: -6px;
      }
  }
  .banner {
    width: 100%;
    position: relative;
    .banner_img {
      width: 100%;
      background: @config-bg5;
      display: block;
    }
    .header_img {
      position: absolute;
      width: 116px;
      height: 116px;
      border-radius: 116px;
      bottom: -58px;
      left: 50%;
      margin-left: -58px;
      background: @config-bg5;
    }
  }

  .echarts_box {
    width: 690px;
    height: 360px;
    background: @config-bg;
    margin: 88px auto 74px;
    position: relative;
    .echarts_box_top {
      position: absolute;
      right: 0;
      left: 0;
      top: 20px;
      @flex();
      @justify5();
      padding: 0 30px;
      box-sizing: border-box;
      .echarts_title {
        @color1();
        z-index: 2;
      }
      .echarts_swtich_box {
        z-index: 2;
        @flex();
        @justify1();
        width: 80px;
        height: 40px;
        position: relative;
        .echarts_text {
          @flex();
          @justify5();
          @color1();
          width: 66px;
          position: absolute;
          top: 2px;
          left: 7px;
          height: 36px;
          line-height: 36px;
          z-index: 4;
        }
        .echarts_swtich {
          width: 100%;
          height: 40px;
          border-radius: 40px;
          background: @config-bg8;
          position: relative;
          p {
            width: 36px;
            height: 36px;
            border-radius: 36px;
            background: @config-bg9;
            position: absolute;
            top: 2px;
            left: 2px;
          }
          .pright {
            left: auto;
            right: 2px;
          }
        }
      }
    }
    #echartsBox {
      width: 690px;
      height: 360px;
    }
  }
  .my_like_box {
    background: @config-bg3;
    .my_like {
      padding: 0 30px;

      .my_like_title {
        height: 100px;
        padding: 46px 0 22px 0;
        box-sizing: border-box;
        text-align: left;
        span {
          margin-top: 46px;
          padding-left: 10px;
          border-left: 4px solid @config-bg4;
          @color5();
        }
      }
    }
    .before_three_box {
      background: @config-bg2;
      li {
        border-bottom: 2px solid @config-bg3;
        .my_info {
          background: @config-bg2;
          height: 120px;
          padding: 0 30px 0;
          box-sizing: border-box;
          @flex();
          @justify5();
          .my_info_con {
            flex-grow: 1;
            @flex();
            @justify5();
          }
          .my_info_l {
            @flex();
            @justify1();
            .img_url {
              width: 72px;
              height: 72px;
              border-radius: 72px;
              background: @config-bg3;
              margin-right: 20px;
            }
            .my_info_l_r {
              span {
                display: block;
                @font14();
                @color2();
                text-align: left;
              }
            }
          }
          .my_info_r {
            @flex();
            @justify3();
            .link_num {
              margin-right: 48px;
              @font24();
              @color3();
            }
            .addLike_r {
              transform: rotate(180deg);
            }
            .yellow {
              @color4();
            }
            .pointer {
              width: 48px;
              img {
                width: 100%;
              }
            }
          }
        }
      }
      li:last-child {
        border-bottom: none;
      }
      .addLike {
        padding: 0 30px;
        height: 120px;
        @flex();
        @justify5();
        .addLike_left {
          @flex();
          @justify1();
          .addLike_left_box {
            width: 72px;
            @flex();
            @justify2();
            margin-right: 20px;
            .addLike_icon {
              width: 46px;
              height: 46px;
              border-radius: 46px;
              border: 2px solid @config-bg10;
              position: relative;
              p {
                background: @config-bg11;
                position: absolute;
                top: 50%;
                left: 50%;
              }
              p:first-child {
                width: 30px;
                height: 4px;
                margin-top: -2px;
                margin-left: -15px;
              }
              p:last-child {
                width: 4px;
                height: 30px;
                margin-top: -15px;
                margin-left: -2px;
              }
            }
          }

          .addLike_text {
            @color2();
          }
        }
        .addLike_r {
          transform: rotate(180deg);
        }
      }

      .before_three_list {
        @flex();
        @justify5();
        box-sizing: border-box;
        padding: 0 30px 0 0;
        .my_info {
          flex-grow: 1;
          padding: 0;
        }
      }
    }
    .add_one_like{
        width: 200px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        @color7();
        border: 2px solid @config-bg12;
        border-radius: 80px;
        margin: 40px auto;
    }
    .remove_one_like{
        border: 2px solid @config-bg14;
        @color5();
    }
  }
  .my_like_box_one{
      display: table;
      width: 100%;
      min-height: 400px;
  }
}
</style>


